<template>
  <div class="search-bar-container">
    <el-row :gutter="10">
      <el-col :span="20">
        <el-input
          v-model="searchValue"
          placeholder="请输入搜索内容"
          prefix-icon="el-icon-search"
          clearable
          class="custom-search-input"
        />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="search" class="custom-search-button">搜索</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.search-bar-container {
  position: relative;
}
.custom-search-input {
  height: 40px;
  border-radius: 20px; /* 加大圆角半径，让两边呈现圆弧形 */
  border: 1px solid #e0e0e0; 
  padding-left: 35px; 
  background-color: #f5f5f5; 
}
.custom-search-input >>>.el-input__prefix {
  color: #999; 
  font-size: 18px; 
}
.custom-search-button {
  height: 40px;
  border-radius: 20px; 
  background-color: #ff6700; 
  border: none;
  &:hover {
    background-color: #ff8c00; 
  }
}
</style>